<template>
    <div v-if="funcShow"
    >
        <div style="height: 5%;text-align: right;">
            <jb-btn strong secondary type="primary" :icon="Icons.ADD" @click="funcShow=!funcShow">挂载FunctionCall</jb-btn>
        </div>
        <div style="height: 95%">
            <jb-table
                :data="list"
            >
                <jb-column type="seq" title="序号" width="60" fixed="left"></jb-column>
                <jb-column
                    field="sn"
                    title="编号"
                    min-width="160"
                    fixed="left"
                ></jb-column>
                <jb-column
                    field="briefInfo"
                    title="Function描述"
                    min-width="160"
                ></jb-column>
                <jb-column
                    field="serviceClass"
                    title="Service方法"
                    min-width="300"
                ></jb-column>

                <jb-column
                    title="操作"
                    width="120"
                    fixed="right"
                >
                    <template #default="{ row }">

                        <jb-btn
                            type="error"
                            class="mx-8px"
                            :icon="Icons.DELETE"
                            secondary
                            circle
                            :confirmText="'确认删除此文件？'"
                            @confirm="remove(row.key)"
                        />
                    </template>
                </jb-column>
            </jb-table>
        </div>
    </div>
    <func v-else :appId="appId" @closeFunction="handleCloseFunction"/>
</template>

<script setup>
import {useResetableData} from "@/hooks/common/use-resetable-data.js";
import {onMounted, ref} from "vue";
import {Icons} from "@/constants/index.js";
import func from './cnps/index.vue'
import {JBoltApi} from "@/service/request/index.js";
import {useMessage} from 'naive-ui'

const message = useMessage()
const props = defineProps({
    appId: String
})
const funcShow = ref(true)
const list = ref([])

const pageRef = ref(null)
const pageConditions = useResetableData({
    appId: props.appId,
})
//关闭弹窗
const handleCloseFunction = () => {
    loadSelectedList();
}

function loadSelectedList() {
    JBoltApi.tryGet('/aiApp/getFuncByAppId', {
        appId: props.appId
    }).then(res => {
        if (res.data != null) {
            list.value = res.data;
        }
        funcShow.value = true

    }).catch((error) => {
        console.error(error)
    })
}

//移除方法
const remove = (id) => {
    console.log('remove', id)
    // 从选中列表中移除
    list.value = list.value.filter(i => i.key !== id)
    JBoltApi.tryPost('/aiApp/submitFunction', {
        appId: props.appId,
        list: list.value.map(item => item.key)
    }).then((res)=>{
        message.success('移除成功');
    }).catch(error => {
        console.error(error)
    })

}


onMounted(() => {
    if (props.appId) {
        loadSelectedList()
    }
})
</script>


<style scoped>

</style>